import { useRoutes, Navigate } from 'react-router-dom'
import Home from '../views/Home'
import Music from '../views/Music'
import News from '../views/News'
import Hot from '../views/Hot'
import Detail from '../views/Detail'
import ErrorPage from '../views/ErrorPage'

import TodoHook from '../views/TodolistHook'
import TodoClass from '../views/TodolistClass'

const RouterView = () => {
    const routes = useRoutes([
        {
            path: "/todohook",
            element: <TodoHook />
        },
        {
            path: "/todoclass",
            element: <TodoClass />
        },
        {
            path: "/",
            element: <Home />
        },
        {
            path: "/music",
            element: <Music />,
            children: [
                {
                    path: "/music",
                    element: <Navigate to='/music/news'></Navigate>
                },
                {
                    path: "news",
                    element: <News />
                },
                {
                    path: "hot",
                    element: <Hot />
                }
            ]
        },
        {
            path: "/detail/:id",
            element: <Detail />
        },
        {
            path: "*",
            element: <ErrorPage />
        }
    ])
    return routes
}

export default RouterView